目標切版畫面：
步驟一、依據視覺上的排列進行分塊
給 classname 可以方便從 html 結構看出長相。對標籤下 css 盡量避免，因為改一個標籤，其他標籤都會被改到，除非是要統一調 style。
<body>
<div class="post">
<div class="post__header">
</div>
<div class="post__option">
</div>
<div class="post__content">
</div>
<div class="post__preview">
</div>
</div>
</body>
步驟二、分塊切板
preview 這塊沒有 padding，所以不能直接對整個 post 加 padding。
所以對於要 padding 的地方再加一層。
<body>
<div class="post">
<div class="post__top">
<div class="post__header">
<div class="post__avatar"></div>
<div class="post__info">
<div class="post__author">Lidemy 鋰學院</div>
<div class="post__timestamp">9月18日下午9:06</div>
</div>
</div>
<div class="post__option">
...
</div>
<div class="post__content">
最近除了忙計畫第二期以外也在忙這個
兩年過後，一個新的開始
這篇稍微講一下下架的理由以及 Lidemy 的下一步
裡面有一些課程的 coupon ，數量有限用完為止
不用留言 +1 就可以獲得 coupon ，多省事
</div>
</div>
<div class="post__preview">
<div class="post__thumbnail"></div>
<div class="post__previe-info">
<div class="post__preview-domain">
MEDIUM.COM
</div>
<div class="post__preview-title">
把 Hahow 的課程下架之後，我的下一步是甚麼? - Huki - Medium
</div>
</div>
</div>
</div>
</body>
.post {
width: 300px; /*高度讓他自動被撐開*/
border: 1px solid gray;
}
.post__top {
padding: 10px;
}
切下半部
.post__thumbnail {
height: 150px;
background-color: orange;
}
.post__previe-info {
background-color: #bbb;
padding: 10px;
}
.post__preview-domain {
font-size: 12px; /*chrome 字體大小小於 12 px 會沒有反應 */
}
.post__preview-title {
font-weight: bold;
}
將 ... 用絕對定位定位，定在右上角
.post__option {
position: absolute;
right: 5px;
top: 5px;
}
.post__top {
padding: 10px;
position: relative;
}
調整內容
white-space 預設空白跟換行都是一個空白。pre 會呈現 html 裡面的樣子，no-wrap 不換行，
.post__content {
white-space: pre-line;
word-break: break-word;
}
切頭貼，讓他暫時變成圓形
.post__avatar {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
}
將 post header 變成左右排列
.post__header {
display: flex;
align-items: center;
}
用偽元素做地球 icon
.post__timestamp::after {
content: '';
width: 10px;
height: 10px;
background-color: blue;
display: inline-block;
margin-left: 5px;
}
微調畫面後，代碼長相
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="post">
<div class="post__top">
<div class="post__header">
<div class="post__avatar"></div>
<div class="post__info">
<div class="post__author">Lidemy 鋰學院</div>
<div class="post__timestamp">9月18日下午9:06</div>
</div>
</div>
<div class="post__option">
...
</div>
<div class="post__content">最近除了忙計畫第二期以外也在忙這個
兩年過後，一個新的開始
這篇稍微講一下下架的理由以及 Lidemy 的下一步
裡面有一些課程的 coupon ，數量有限用完為止
不用留言 +1 就可以獲得 coupon ，多省事
</div>
</div>
<div class="post__preview">
<div class="post__thumbnail"></div>
<div class="post__previe-info">
<div class="post__preview-domain">
MEDIUM.COM
</div>
<div class="post__preview-title">
把 Hahow 的課程下架之後，我的下一步是甚麼? - Huki - Medium
</div>
</div>
</div>
</div>
</body>
</html>
.post {
width: 400px; /*高度讓他自動被撐開*/
border: 1px solid gray;
}
.post__top {
padding: 10px;
position: relative;
}
.post__thumbnail {
height: 150px;
background-color: orange;
}
.post__previe-info {
background-color: #bbb;
padding: 10px;
}
.post__preview-domain {
font-size: 12px; /*chrome 字體大小小於 12 px 會沒有反應 */
}
.post__preview-title {
font-weight: bold;
}
.post__option {
position: absolute;
right: 5px;
top: 5px;
}
.post__content {
white-space: pre-line;
word-break: break-word;
margin-top: 10px;
}
.post__avatar {
border-radius: 50%;
width: 50px;
height: 50px;
background-color: red;
margin-right: 10px;
}
.post__header {
display: flex;
align-items: center;
}
.post__timestamp::after {
content: '';
width: 10px;
height: 10px;
background-color: blue;
display: inline-block;
margin-left: 5px;
}
QA 時間
Float vs FlexBox vs Grid
- Float : 現在較少人使用，但若需要支援 ie 11 以下，較舊的瀏覽器，就需要他。很多用在文繞圖。
- FlexBox : 支援 ie 11 含以上。補充說明：align-items 只用在 FLEXbox 上，vertical-align 是應用在 inline 元素、table。
- Grid : 與 FlexBox 可以一起用，只是用在不同的地方、有不同的應用場景。
PS 這三個不是互斥，可以一起用
為甚麼要把東西包起來 ?
包起來才能一起進行設定。如果不包，就要對個別的元素進行個別的設定，會很亂、很複雜。
CSS 很亂一直重複 ?
- CSS class 名稱沒取好
reset.css vs normalize.css
reset.css 會針對所有標籤下 css => 將瀏覽器加上的預設樣式全部清空，可以保證你在所有瀏覽器上看到的都是最乾淨的樣子。目的是為了跨瀏覽器的支援。
normalize.css 希望有朝一日取代 reset.css，與其將瀏覽器樣式清空，不如試著遵循瀏覽器的樣式，讓他盡可能看起來一致。會依據每個平台不同，而有不同的表現，不會硬把瀏覽器的樣式給清掉。
怎麼知道查資料，有無過時
前端更新很快，但很多基礎是不會過時。資訊過時仍有用，只是東西比較舊。除非真的超級無敵舊，但基本上也不會找到相關的資料。所以找到排名前面的資源，都是 ok 的。也可以多找幾篇看。
有辦法找到網頁檔案，最終更新日期嗎 ?
沒辦法，可以試著但不一定準。dev-tool => header => last-modified
可能檔案沒有更新，但仍 update 這個時間。<recall touch 指令>
